<template>
  <div style="width: 1000px; margin: 0 auto">
    <el-popover placement="right" :width="400" trigger="click">
      <template #reference>
        <el-button type="primary" style="margin-left: 10px">自定义列</el-button>
      </template>
      <template>
        <div class="popover_title">自定义列</div>
        <ul class="custom_query">
          <li v-for="(item, index) in customQueryList" :key="index">
            <el-checkbox
              :value="item.checked"
              @change="handleShow($event, item)"
              style="width: 186px; margin: 5px 0"
            >
              {{ item.label }}
            </el-checkbox>
          </li>
        </ul>
      </template>
    </el-popover>
    <el-table :data="tableData" border>
      <el-table-column
        prop="date"
        label="日期"
        width="180"
        v-if="isChecked('date')"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
        v-if="isChecked('name')"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        v-if="isChecked('address')"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "TableTest",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      customQueryList: [
        { field: "date", checked: false, label: "日期" },
        { field: "name", checked: true, label: "姓名" },
        { field: "address", checked: true, label: "地址" },
      ],
      columnFields: {
        date: true, // 控制日期列是否显示
        name: true, // 控制姓名列是否显示
        address: true, // 控制地址列是否显示
      },
    };
  },
  methods: {
    handleShow(checked, item) {
      console.log('item', item);
      this.customQueryList.forEach((t) => {
        console.log('t', t);
        if (item.field == t.field) {
          t.checked = checked;
        }
      });
    },
    isChecked(value){
      const item = this.customQueryList.find((item) => item.field === value);
      return item ? item.checked : false;
    }
  },
};
</script>

<style lang="less" scoped></style>
